//引入响应式布局
@import url(./../../../scss//rective.scss);

.cooran{
  margin: 0 auto;
  display: flex;
  font-size: 16px;
}
.left{
  padding: 16px 0 50px 0;
  margin-right: 16px;
  width: calc(100% - 20rem - 1rem);
  .items{
    width: 100%;
    height: 200.89px;
    display: flex;
    padding: 12.8px;
    justify-content: space-between;
    background-color: white;
    margin-bottom: 16px;
    background-color: var(--bg-second);
    color: var(--main-text-color);
    >img{
      width: 311.35px;
    }
    >div{
      width: 451.04px;
      height: 100%;
      padding: 16px 0px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      >p:first-child{
        color: var(--main-text-color);
        overflow: hidden;
        font-weight: 600;
        font-size: 18px;
        // line-height: 22px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      >p:first-child:hover{
        color: #ff0064;
      }
      >p:nth-child(2){
        display: -webkit-box;
        max-width: 100%;
        margin-top: .5rem;
        color: var(--second-text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      >P:last-child{
        color: #8590a6;
        // line-height: 0px;
      }
    }
  }
}
.right{
  width: 320px;
  height: 100px;
  padding-top: 16px;
  // background-color: chocolate;
}
